<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程学习 - 筑梦智程</title>
    <link rel="icon" type="image/x-icon" href="https://pic.imgdb.cn/item/66e93bfef21886ccc0d210d1.jpg"/>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./course.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <script src="https://player.bilibili.com/player.js"></script>
</head>
<body>
    <header class="site-header">
        <div class="container">
            <div class="header-content">
                <div class="logo-container">
                    <div class="logost"></div>
                    <div class="logo">筑梦智程</div>
                </div>
                <nav class="main-nav">
                    <ul class="navigation">
                        <li><a href="index.html#home">首页</a></li>
                        <li><a href="index.html#products">产品</a></li>
                        <li><a href="index.html#team">团队</a></li>
                        <li><a href="index.html#about">关于我们</a></li>
                        <li><a href="index.html#contact">联系我们</a></li>
                        <li><a href="course.html" class="active">课程学习</a></li>
                        <li><a href="ai-chat.html" class="cta-button">AI 助手</a></li>
                        <li><a href="admin.html">后台管理</a></li>
                    </ul>
                </nav>
                <div class="theme-switch-wrapper">
                    <em>暗黑模式</em>
                    <label class="theme-switch" for="checkbox">
                        <input type="checkbox" id="checkbox" />
                        <div class="slider round"></div>
                    </label>
                </div>
            </div>
        </div>
    </header>

    <main>
        <section id="course-hero" class="hero-section">
            <div class="hero-content">
                <h1 class="glow-text">课程学习</h1>
                <p>探索我们的课程，提升您的技能</p>
            </div>
        </section>

        <section id="course-categories" class="section-padding">
            <div class="container">
                <h2 class="section-title">课程分类</h2>
                <div class="category-grid">
                    <a href="#" class="category-item">
                        <i class="category-icon">🖥️</i>
                        <h3>编程基础</h3>
                    </a>
                    <a href="#" class="category-item">
                        <i class="category-icon">🤖</i>
                        <h3>人工智能</h3>
                    </a>
                    <a href="#" class="category-item">
                        <i class="category-icon">📊</i>
                        <h3>数据科学</h3>
                    </a>
                    <a href="#" class="category-item">
                        <i class="category-icon">🌐</i>
                        <h3>Web开发</h3>
                    </a>
                </div>
            </div>
        </section>

        <section id="featured-courses" class="section-padding">
            <div class="container">
                <h2 class="section-title">精选课程</h2>
                <div class="course-grid">
                    <div class="course-card">
                        <img src="https://pic.imgdb.cn/item/66eb9b2af21886ccc07dc1c4.png" alt="课程1" class="course-image">
                        <div class="course-content">
                            <h3 class="course-title">Python入门到精通</h3>
                            <p class="course-description">从零开始学习Python，掌握编程基础知识。</p>
                            <a href="#" class="cta-button">开始学习</a>
                        </div>
                    </div>
                    <div class="course-card">
                        <img src="https://pic.imgdb.cn/item/66eb9b2af21886ccc07dc1c4.png" alt="课程2" class="course-image">
                        <div class="course-content">
                            <h3 class="course-title">机器学习基础</h3>
                            <p class="course-description">了解机器学习的核心概念和算法。</p>
                            <a href="#" class="cta-button">开始学习</a>
                        </div>
                    </div>
                    <!-- 添加更多课程卡片 -->
                </div>
            </div>
        </section>

        <section id="video-learning" class="section-padding">
            <div class="container">
                <h2 class="section-title">视频学习</h2>
                <div class="video-grid">
                    <div class="video-item">
                        <iframe src="https://player.bilibili.com/player.html?aid=113186548227619&bvid=BV1PasQegEqF&cid=25683828132&page=1&autoplay=1" 
                                allowfullscreen="true">
                        </iframe>
                    </div>
                    <div class="video-item">
                        <iframe src="https://player.bilibili.com/player.html?aid=113192823037651&bvid=BV1rTsvepEvn&cid=25987517501&page=1&autoplay=1" 
                                allowfullscreen="true">
                        </iframe>
                    </div>
                    <div class="video-item">
                        <iframe src="https://player.bilibili.com/player.html?aid=113184484626526&bvid=BV1dCsmeLEn2&cid=25679633444&page=1&autoplay=1" 
                                allowfullscreen="true">
                        </iframe>
                    </div>
                </div>
            </div>
        </section>

        <section id="testimonials" class="section-padding">
            <div class="container">
                <h2 class="section-title">学员反馈</h2>
                <div class="testimonial-grid">
                    <div class="testimonial-item">
                        <img src="path/to/student1.jpg" alt="学员1" class="testimonial-image">
                        <blockquote>"这个课程真的很棒！我学到了很多实用的技能。"</blockquote>
                        <p class="student-name">- 张三, 软件工程师</p>
                    </div>
                    <div class="testimonial-item">
                        <img src="path/to/student2.jpg" alt="学员2" class="testimonial-image">
                        <blockquote>"教学质量非常高，老师们都很专业。"</blockquote>
                        <p class="student-name">- 李四, 数据分析师</p>
                    </div>
                    <!-- 添加更多反馈 -->
                </div>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <div class="container">
            <p>&copy; 2024 筑梦智程. All rights reserved.</p>
        </div>
    </footer>

    <script src="index.js"></script>
    <script src="theme-switch.js"></script>
    <script src="course.js"></script>
</body>
</html>